<template >
  <div>
    <el-card class="filter-container" shadow="never">
      <!-- <div>
        <i class="el-icon-search"></i> -->
        <!-- <span>筛选搜索</span> -->
        <!-- <el-button style="float:right; margin-right: 30px" type="success" @click="exportFile">导出</el-button> -->
        <!-- <el-button style="float:right; margin-right: 15px" @click="uploadDialogVisible = true">上传</el-button>
      </div> -->
      <!-- 上传文件 -->
      <el-button style="float:right; margin-right: 15px" @click="uploadDialogVisible = true">上传</el-button>

        <el-dialog v-model="uploadDialogVisible" title="上传文件" width="600px">
          <el-upload
            class="upload-demo"
            drag
            action=""  
            :show-file-list="false"
            :on-change="handleFileChange"
          >
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">点击或拖拽文件(.xlsx)到此区域进行上传</div>
          </el-upload>

          <div v-if="fileName" style="margin-top: 10px; font-size: 14px; color: #333;">
            选择的文件：
            <span>{{ fileName }}</span>
            <button @click="clearFile" style="background: none; border: none; color: red; cursor: pointer; font-size: 16px;">&times;</button>
          </div>

          <template #footer>
            <el-button @click="uploadFile">上传</el-button>
            <el-button @click="uploadDialogVisible = false">取消</el-button>
          </template>
        </el-dialog>
    
      
        <div style="margin-top: 30px; ">
      </div>
    </el-card>

        <el-table :data="fileList">
          <!-- <el-table-column type="selection" width="55" /> -->
          <el-table-column label="名称">
            <!-- 使用插槽自定义列内容 -->
            <template v-slot="scope">
              <el-link :underline="false" :href="getFileUrl(scope.row.fileName)">{{scope.row.fileName}}</el-link>
              <!-- <a :href="getFileUrl(scope.row.fileName)" :download="getFileUrl(scope.row.fileName)">{{ scope.row.fileName }}</a> -->
            </template>
          </el-table-column>
         <el-table-column  prop="sizeInBytes" label="大小" />
         
          <el-table-column  prop="lastModified" label="修改日期" >
            <template #default="scope">
              {{ formatDate(scope.row.lastModified) }}
            </template> 
          </el-table-column>
       </el-table>
  </div>
  <div>
    <div>
      <el-pagination :current-page="queryParams.page" 
      :page-size="queryParams.pageSize" 
      :page-sizes="[10, 20, 30]"
      :small="false" 
      :disabled="false" 
      :background="true" layout="total, sizes, prev, pager, next, jumper"
      :total="total" 
      @size-change="handleSizeChange" 
      @current-change="handleNumChange" />
    </div>
</div>
   </template>
  <script lang="ts" setup>
import { fechFileList,fileUpload } from '../../api/fileApi';
import { nextTick, ref, reactive, onMounted, VueElement, handleError} from 'vue';
import dayjs from 'dayjs';
//获取列表数据


const fileList = ref([]); // 直接使用 ref 定义数组
let total = ref(0);
// 查询参数
const queryParams = ref({
  page: 1,
  pageSize: 10,
});
function getFileList() {
  console.log("queryparams",queryParams.value);
  fechFileList(queryParams.value)
    .then(res => {
      console.log('res',res)  
      console.log('res.data.fileDatas',res.data.fileDatas)  
      fileList.value = res.data.fileDatas.fileInfos; // 如果 res 是数组
      total.value = res.data.fileDatas.total

    })
    .catch(error => {
      console.error("Error fetching towers list:", error);
    });
}

const handleSizeChange = val => {
  queryParams.value.pageSize = val;
  console.log(val)
  console.log(queryParams.value.pageSize)
  console.log(queryParams.value);
  getFileList();
};

const handleNumChange = val => {
  console.log(val);
  queryParams.value.page = val;
  getFileList();
};

const formatDate=(date) =>{
  return dayjs(date).format('YYYY-MM-DD HH:mm:ss');
}
onMounted(() => {
  getFileList();
});
function getFileUrl(fileName) {
      const serverUrl = "http://121.42.179.58:8000/"; // 文件服务器的 IP 地址
      return serverUrl + fileName;
}
const uploadDialogVisible = ref(false);
const showUpTableModal = ref(false);
const fileName = ref<string | null>(null);
const form = ref<{ file: File | null }>({ file: null });
const changeFile = ref();
//const file=ref('')
const acceptTypes = ref('*/*'); // 默认接受所有文件类型，可以根据需要调整

// 上传接口 URL
const uploadUrl = ref('YOUR_UPLOAD_API_URL');

// 处理文件选择变化
// const handleFileChange = (file: any) => {
//   if (file) {
//     console.log('文件列表', file.raw);
//     console.log('文件名', file.name);
//     fileName.value = file.name;
//     const aBlob = new Blob([file], { type: file.type });
//     console.log(aBlob);
//     form.value.file = aBlob;
//     console.log('form.value.file', form.value.file);
//     console.log('form.value.file type', typeof form.value.file);
//   }
// };

  
 

// // 上传文件并调用接口
// const uploadFile = async () => {
//   // if (!form.value.file) {  // 确保是 form.value.file
//   //   ElMessage({
//   //     message: '请先选择一个文件进行上传',
//   //     type: 'warning',
//   //     duration: 1000
//   //   });
//   //   return;
//   // }

//   // 创建 FormData 对象, 以文件流形式上传文件到接口
//   const formData = new FormData();
// console.log("上传的文件类型：", form.value.file);
// console.log("文件是否为 File 对象：", form.value.file instanceof File);

// formData.append('key', 'file'); // 假设 'key' 是你传递的参数名
// formData.append('file', form.value.file, fileName.value); // 文件对象和文件名
// formData.append('filename', fileName.value); // 如果需要独立的文件名参数，可以单独添加

// // 检查 formData 内容
// for (let pair of formData.entries()) {
//   console.log(pair[0] + ": " + pair[1]);
// }

// try {
//   // 调用上传接口
//   console.log("上传中", formData);
//   const response = await fileUpload(formData);  // 使用 fileUpload API 上传文件
//   console.log('上传成功', response);

//   // 清空文件状态
//   form.value.file = null;  // 清空 form.file
//   fileName.value = null;
//   uploadDialogVisible.value = false; // 关闭弹窗

//   // 显示成功消息
//   ElMessage({
//     message: '上传成功',
//     type: 'success',
//     duration: 1000
//   });
// } catch (error) {
//   console.error("上传失败", error);
//   ElMessage({
//     message: '上传失败',
//     type: 'error',
//     duration: 1000
//   });
// }
// };

const handleFileChange = (file: any) => {
  if (file) {
    console.log('文件列表', file.raw);
    console.log('文件名', file.name);
    fileName.value = file.name;
    
    // 直接将 File 对象赋值给 form.file
    form.value.file = file.raw;
    console.log('form.value.file', form.value.file);
    console.log('form.value.file type', typeof form.value.file);
  }
};
const uploadFile = async () => {
  if (!form.value.file) {
    ElMessage({
      message: '请先选择一个文件进行上传',
      type: 'warning',
      duration: 1000
    });
    return;
  }

  // 创建 FormData 对象，上传文件
  const formData = new FormData();
  console.log("上传的文件类型：", form.value.file);
  console.log("文件是否为 File 对象：", form.value.file instanceof File);

  // 添加表单字段
  formData.append('key', 'file'); // 假设 'key' 是你传递的参数名
  formData.append('file', form.value.file, fileName.value); // 直接使用 File 对象和文件名
  formData.append('filename', fileName.value); // 如果需要独立的文件名参数，可以单独添加

  // 检查 formData 内容
  for (let pair of formData.entries()) {
    console.log(pair[0] + ": " + pair[1]);
  }

  try {
    // 调用上传接口
    console.log("上传中", formData);
    const response = await fileUpload(formData);  // 使用 fileUpload API 上传文件
    console.log('上传成功', response);

    // 清空文件状态
    form.value.file = null;  // 清空 form.file
    fileName.value = null;
    uploadDialogVisible.value = false; // 关闭弹窗

    // 显示成功消息
    ElMessage({
      message: '上传成功',
      type: 'success',
      duration: 1000
    });
  } catch (error) {
    console.error("上传失败", error);
    ElMessage({
      message: '上传失败',
      type: 'error',
      duration: 1000
    });
  }
};

</script>
<style lang="less">
</style>